<html>
    <head>
        <title>小程序自定义组件支持</title>
    </head>
    <body>
        <script>
             /*
                    一、小程序自定义组件支持

                                uni-app 在支持vue组件之外，也实现了对小程序自定义组件的兼容。

                                小程序组件不是vue组件，并且每家小程序都有自己的组件规范，比如微信小程序的组件时wxml格式。

                                小程序组件不是全端可用，支持度最广的微信小程序自定义组件，也只能支持微信小程序、app-vue、web，

                                其他平台无法兼容。


                                如果需求上只需兼容有限平台，可以使用小程序组件。否则仍然推荐使用vue组件。


                                1、平台差异说明

                                            平台              支持情况                                 小程序组件存放目录

                                            H5                vue2项目支持微信小程序组件，              wxcomponents
                                                                vue3不支持

                                            App(不含nvue)      vue2项目支持微信小程序组件，              wxcomponents
                                                                vue3不支持
                                                    
                                            微信小程序         支持微信小程序组件                        wxcomponents

                                            支付宝小程序       支持支付宝小程序组件                      mycomponents

                                            百度小程序         支持百度小程序组件                        swancomponents

                                            抖音小程序、        支持抖音小程序、飞书小程序组件             ttcomponents
                                            飞书小程序

                                            qq小程序           支持qq小程序组件                          wxcomponents

                                            快手小程序          支持快手小程序组件                        kscomponents

                                            京东小程序          支持京东小程序组件                        jdcomponents


                                此文档要求开发者对各端小程序的自定义组件有一定了解，每接触过小程序自定义组件的可以参考：


                                    ①、微信小程序自定义组件：  https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

                                    ②、百度小程序自定义组件:   https://smartprogram.baidu.com/docs/develop/framework/custom-component/

                                    ③、支付宝小程序自定义组件： https://docs.alipay.com/mini/framework/custom-component-overview

                                    ④、抖音小程序自定义组件：   https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/guide/developing-and-testing-miniApp/front-end/mini-app-framework/custom-component/component-constructor

                                    ⑤、飞书小程序自定义组件：   https://open.feishu.cn/document/uYjL24iN/ugTOugTOugTO

                                    ⑥、QQ小程序自定义组件：     https://q.qq.com/wiki/develop/miniprogram/frame/diy_components/

                                    ⑦、快手小程序自定义组件：   https://mp.kuaishou.com/docs/develop/frame/custom_comp/component_temp_style.html

                                    ⑧、京东小程序自定义组件：   https://mp-docs.jd.com/framework/customcomponent/


                            2、目录结构：

                                        ┌─wxcomponents                  微信小程序自定义组件存放目录
                                        │   └──custom                   微信小程序自定义组件
                                        │		├─index.js
                                        │		├─index.wxml
                                        │		├─index.json
                                        │		└─index.wxss
                                        ├─mycomponents                  支付宝小程序自定义组件存放目录
                                        │   └──custom                   支付宝小程序自定义组件
                                        │		├─index.js
                                        │		├─index.axml
                                        │		├─index.json
                                        │		└─index.acss
                                        ├─swancomponents                百度小程序自定义组件存放目录
                                        │   └──custom                   百度小程序自定义组件
                                        │		├─index.js
                                        │		├─index.swan
                                        │		├─index.json
                                        │		└─index.css
                                        ├─pages
                                        │  └─index
                                        │		└─index.vue
                                        │
                                        ├─static
                                        ├─main.js
                                        ├─App.vue
                                        ├─manifest.json
                                        └─pages.json


                            3、使用方式

                                        ①、在 pages.json对应页面的 style---usingComponents 引入组件：

                                                {
                                                    "pages": [{
                                                    "path": "index/index",
                                                    "style": {
                                                        // #ifdef APP-PLUS || H5 || MP-WEIXIN || MP-QQ
                                                        "usingComponents": {
                                                            "custom": "/wxcomponents/custom/index"
                                                        },
                                                        // #endif
                                                        // #ifdef MP-BAIDU
                                                        "usingComponents": {
                                                            "custom": "/swancomponents/custom/index"
                                                        },
                                                        // #endif
                                                        // #ifdef MP-ALIPAY
                                                        "usingComponents": {
                                                            "custom": "/mycomponents/custom/index"
                                                        },
                                                        // #endif
                                                        "navigationBarTitleText": "uni-app"
                                                    }
                                                    }]
                                                }

                                        ②、在页面中使用

                                                <!-- 页面模板 (index.vue) ->
                                                <view>
                                                    <!-- 在页面中对自定义组件进行引用 ->
                                                    <custom name="uni-app"></custom>
                                                </view>



                            4、代码示例：

                                    下面以微信小程序官方自定义组件示例  miniprogram-slide-view 为例演示小程序自定义组件的使用方式。

                                    其他组件使用示例间GitHub： wxcomponents-template https://github.com/dcloudio/uni-app/tree/master/examples/wxcomponents-template

                                    插件市场有一个完整的 vant weapp 引用好的示例工程，详见  https://ext.dcloud.net.cn/plugin?id=302

                                    ①、目录结构：

                                                ┌─components
                                                ├─wxcomponents
                                                │   └──miniprogram-slide-view
                                                │		├─index.js
                                                │		├─index.wxml
                                                │		├─index.json
                                                │		└─index.wxss
                                                │
                                                ├─pages
                                                │  └─slide-view
                                                │		└─slide-view.vue
                                                │
                                                ├─static
                                                ├─main.js
                                                ├─App.vue
                                                ├─manifest.json
                                                └─pages.json

                                        ②、pages.json

                                                {
                                                    "pages": [
                                                        {
                                                            "path": "slide-view/slide-view",
                                                            "style": {
                                                            "navigationBarTitleText": "slide-view",
                                                            "usingComponents": {
                                                                "slide-view": "/wxcomponents/miniprogram-slide-view/index"
                                                            }
                                                            }
                                                        }
                                                    ]
                                                }

                                        ③、slide-view.vue

                                                <template>
                                                    <view class='slide'>
                                                        <slide-view width="750" height="110" slide-width="500">
                                                        <view slot="left" class="l">
                                                            <image src="/static/file_transfer.jpg" class="img"></image>
                                                            <view class='text'>
                                                            <view class='title'>文件传输助手</view>
                                                            <view class='time'>7:00 PM</view>
                                                            </view>
                                                        </view>
                                                        <view slot="right" class="r">
                                                            <view class='read'>标为已读</view>
                                                            <view class='delete'>删除</view>
                                                        </view>
                                                        </slide-view>
                                                    </view>
                                                </template>
                                                <dd script>
                                                    export default {}
                                                <//script>
                                                <style>
                                                    .slide {
                                                    border-bottom: 1px solid #DEDEDE;
                                                    }
                                                    .l {
                                                    background-color: white;
                                                    height: 110rpx;
                                                    width: 750rpx;
                                                    display: flex;
                                                    flex-direction: row;
                                                    }
                                                    .r {
                                                    height: 110rpx;
                                                    display: flex;
                                                    direction: row;
                                                    text-align: center;
                                                    vertical-align: middle;
                                                    line-height: 110rpx;
                                                    }
                                                    .read {
                                                    background-color: #ccc;
                                                    color: #fff;
                                                    width: 350rpx;
                                                    }
                                                    .delete {
                                                    background-color: red;
                                                    color: #fff;
                                                    width: 150rpx;
                                                    }
                                                    .img {
                                                    width: 90rpx;
                                                    height: 90rpx;
                                                    border-radius: 10rpx;
                                                    margin: 10rpx 15rpx;
                                                    }
                                                    .text {
                                                    display: flex;
                                                    flex-direction: row;
                                                    }

                                                    .title {
                                                    margin-top: 15rpx;
                                                    font-size: 33rpx;
                                                    }
                                                    .time {
                                                    margin-top: 15rpx;
                                                    color: #ccc;
                                                    font-size: 25rpx;
                                                    margin-left: 330rpx;
                                                    }
                                                </style>
                                                
                            5、注意事项

                                        ①、小程序组件需要放在项目特殊文件夹 wxcomponents (或 mycomponents、swancomponents).
                                        
                                        HBuilderX建立的工程 wxcomponents 文件夹在项目根目录下。

                                        vue-cli建立的工程 wxcomponents 文件夹在 src目录下。

                                        可以在 vue.config.js中自定义其他目录。

                                        ②、小程序组件的性能，不如vue组件。使用小程序组件，需要自己手动setData,很难自动管理差量数据更新。

                                        而使用vue组件会自动 diff更新差量数据。所以如五明显必要，建议使用vue组件而不是小程序组件。

                                        比如某些小程序ui组件，完全可以使用更高性能的 uni ui 替代。

                                        ③、当需要在 vue 组件中使用小程序组件时，注意在 pages.json 的 globalStyle 中配置 usingComponents,

                                        而不是页面级配置。

                                        ④、注意数据和事件绑定的差异，组件使用时应该按照 vue 的数据和事件绑定方式

                                                属性绑定从 attr=""，改为 :attr="a"；从 title="复选框" 改为 :title="'复选框' + item"
                                                
                                                事件绑定从 bind:click="toggleActionSheet1" 改为 @click="toggleActionSheet1"，
                                                目前支付宝小程序不支持 vue 的事件绑定方式，具体参考：支付宝小程序组件事件监听示例

                                                阻止事件冒泡 从 catch:tap="xx" 改为 @tap.native.stop="xx"

                                                wx:if 改为 v-if

                                                wx:for="" wx:key="" 改为v-for="(item,index) in list"

                                        详细的小程序转 uni-app语法差异可参考文档：  https://ask.dcloud.net.cn/article/35786
                                                                
      */
        </script>
    </body>
</html>